<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            padding: 10px;
            margin-bottom: 2rem;
        }
        .auto{
            table-layout: auto;
            width: 450px;
        }
        .fixed{
            table-layout: fixed;
            width: 450px;
        }
        .separate{
            border-collapse: separate;
        }
        .collapse{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <h1>Table</h1>

    <h2>table-layout</h2>
    <p>通常fixed算法会比auto算法高效，尤其是对于那些长表格来说。fixed算法使得表格可以像其它元素一样一行一行的渲染</p>
    <div class="box">
        <b>auto: 表格算法</b>
        <hr>
        <table border="1" class="auto">
            <tbody>
                <tr>
                    <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
                <tr>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
            </tbody>
        </table>
        <br/>
        <br/>

        <b>fixed: 表格固定算法</b>
        <hr>
        <table border="1" class="fixed">
            <tbody>
                <tr>
                    <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
                <tr>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
            </tbody>
        </table>
    </div>


    <h2>border-collapse</h2>
    <div class="box">
        <b>separate</b>
        <hr>
        <table border="1" class="separate">
            <tbody>
                <tr>
                    <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
                <tr>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
            </tbody>
        </table>
        <br/>
        <br/>
    
        <b>collapse</b>
        <hr>
        <table border="1" class="collapse">
            <tbody>
                <tr>
                    <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
                <tr>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
            </tbody>
        </table>
    </div>


    <h2>border-spacing</h2>
    <div class="box">

        <b>border-collapse: separate + border-spacing: 20px;</b>
        <hr>
        <table border="1" class="separate" style="border-spacing: 20px;">
            <tbody>
                <tr>
                    <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
                <tr>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
            </tbody>
        </table>
        <br/>
        <br/>
    
        <b>border-collapse: collapse + border-spacing: 20px;</b>
        <hr>
        <table border="1" class="collapse" style="border-spacing: 20px;">
            <tbody>
                <tr>
                    <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
                <tr>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
            </tbody>
        </table>
    </div>


    <h2>empty-cells</h2>
    <div class="box">
    
        <b>hide</b>
        <hr>
        <table border="1" style="empty-cells: hide;">
            <tbody>
                <tr>
                    <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
                <tr>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                    <td style="background-color: #f60"></td>
                </tr>
            </tbody>
        </table>
        <br/>
        <br/>
    
        <b>show</b>
        <hr>
        <table border="1" style="empty-cells: show;">
            <tbody>
                <tr>
                    <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                </tr>
                <tr>
                    <td>表格自动算法</td>
                    <td>表格自动算法</td>
                    <td style="background-color: #f60"></td>
                </tr>
            </tbody>
        </table>
    </div>


</body>
</html>